﻿/*!
 * Ext JS Library 4.2 -- Lyh.grid.Action
 * Copyright(c) 2014 lyh Inc.
 * logyou@msn.com
 * http://extjs.codeplex.com/
 */

Ext.define('Lyh.grid.Action', {
    extend: 'Ext.grid.Panel',
    alias: 'action',
    layout: 'fit',

    initComponent: function() {
        var me = this;

        me.comboStore = Ext.create('Ext.data.JsonStore', {
            storeId: 'comboStore',
            proxy: {
                type: 'ajax',
                url: '/Action/ComboSource',
                reader: {
                    type: 'json',
                    root: 'Items',
                    idProperty: 'Id',
                    totalProperty: 'Total'
                }
            },
            fields: ['Id', 'ActionName', 'ControllerName', 'Description']
        });

        me.store = Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['Id', 'ActionName', 'ControllerName', 'Description'],
            data: {
                items: [
                    { 'Id': '11', 'ActionName': 'Lisa', "ControllerName": "lisa@simpsons.com", "Description": "555-111-1224" },
                    { 'Id': '12', 'ActionName': 'Bart', "ControllerName": "bart@simpsons.com", "Description": "555-222-1234" },
                    { 'Id': '13', 'ActionName': 'Homer', "ControllerName": "home@simpsons.com", "Description": "555-222-1244" },
                    { 'Id': '14', 'ActionName': 'Marge', "ControllerName": "marge@simpsons.com", "Description": "555-222-1254" }
                ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            },
            listeners: {
                update: function(sender, record, operation) {
                    if (operation == Ext.data.Model.EDIT) {
                        Ext.Ajax.request({
                            url: '/Action/SaveOrUpdate',
                            params: record.data,
                            success: function(response, opts) {

                            },
                            failure: function(response, opts) {

                            }
                        });
                    }
                }
            }
        });

        me.topBar = Ext.create('Ext.toolbar.Toolbar', {
            items: [
                {
                    text: '添加',
                    iconCls: 'add',
                    handler: function () {
                        me.store.insert(0, {});
                        me.grid.getView().refresh();
                        me.rowEditing.startEdit(0, 0);
                    }
                }, '-', {
                    text: '修改',
                    iconCls: 'edit',
                    handler: function() {
                        var datas = me.grid.getSelectionModel().getSelection();
                        if (datas.length == 0) {
                            Ext.Msg.alert('提示', '请在您要修改的行前面打勾，或者直接双击您想修改的行！');
                        } else {
                            var data = datas[0];
                            me.rowEditing.startEdit(data, 0);
                            me.combobox.select(data.data.ActionName);
                        }
                    }
                }, '-', {
                    text: '删除',
                    iconCls: 'delete',
                    handler: function () {
                        var datas = me.grid.getSelectionModel().getSelection();
                        if (datas.length == 0) {
                            Ext.Msg.alert('提示', '请在您要删除的行前面打勾');
                        } else {
                            var data = datas[0];
                            Ext.Msg.alert('提示', 'OK');
                        }
                    }
                }
            ]
        });

        me.pageBar = Ext.create('Ext.PagingToolbar', {
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            displayInfo: true,
            displayMsg: '显示第{0}条至第{1}条数据，共{2}条数据',
            emptyMsg: '没有数据'
        });

        me.index = Ext.create('Ext.grid.RowNumberer', {
            header: '',
            width: 40,
            renderer: function(value, metadata, record, rowIndex) {
                return rowIndex + 1;
            }
        });

        me.editRecord = null;
        me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
            pluginId: 'rowEditing',
            clicksToEdit: 2,
            saveBtnText: '保存',
            cancelBtnText: '取消',
            errorsText: '提示',
            listeners: {
                beforeedit: function(editor, context) {
                    var record = context.record;
                    me.editRecord = record;
                    me.combobox.select(record.get('ActionName'));
                    var id = record.get('Id');
                    if (id == null || id == '') {
                        me.combobox.setDisabled(false);
                    } else {
                        me.combobox.setDisabled(true);
                    }
                },
                edit: function(editor, context) {
                    var record = context.record;
                    if (me.comboSelectedRecord == null) return;
                    var id = record.get('Id');
                    if (id == null || id == '') {
                        record.beginEdit();
                        record.set('Id', me.comboSelectedRecord.get('Id'));
                        record.commit();
                    }
                    ////record.set('ActionName', comboRecord.get('ActionName'));
                    ////record.set('ControllerName', comboRecord.get('ControllerName'));
                    ////record.set('Description', comboRecord.get('Description'));
                    //record.endEdit();
                }
            }
        });

        me.checkboxModel = Ext.create('Ext.selection.CheckboxModel', {
            injectCheckbox: 1,
            checkOnly: false
        });

        me.comboTpl = new Ext.XTemplate(
            '<table class="combo-grid">',
            '<thead>',
            '<tr>',
            '<td class="combo-grid-column-header">Action名称</td>',
            '<td class="combo-grid-column-header">Controller名称</td>',
            '<td class="combo-grid-column-header">描述</td>',
            '</tr>',
            '</thead>',
            '<tbody>',
            '<tpl for=".">',
            '<tr class="x-boundlist-item">',
            '<td class="combo-grid-cell"><div>{ActionName}</div></td>',
            '<td class="combo-grid-cell"><div>{ControllerName}</div></td>',
            '<td class="combo-grid-cell"><div>{Description}</div></td>',
            '</tr>',
            '</tpl>',
            '</tbody>',
            '</table>');

        me.comboSelectedRecord = null;
        me.combobox = Ext.create('Ext.form.field.ComboBox', {
            id: 'combobox',
            queryMode: 'remote',
            pageSize: 10,
            limit:10,
            minChars:0,
            displayField: 'ActionName',
            valueField: 'Id',
            matchFieldWidth: false,
            emptyText: '请选择或输入...',
            store: me.comboStore,
            tpl: me.comboTpl,
            listeners: {
                change: function (sender, newValue) {
                    var record = me.editRecord;
                    var comboRecord = me.combobox.getStore().getById(newValue);
                    if (comboRecord == null) return;
                    me.comboSelectedRecord = comboRecord;
                    record.beginEdit();
                    record.set('ActionName', comboRecord.get('ActionName'));
                    record.set('ControllerName', comboRecord.get('ControllerName'));
                    record.set('Description', comboRecord.get('Description'));
                    //record.endEdit();
                    //me.rowEditing.cancelEdit();
                    me.rowEditing.startEdit(record, 0);
                }
            }
        });


        me.grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            selModel: me.checkboxModel,
            columns: [
                me.index,
                { text: 'Action名称', dataIndex: 'ActionName', flex: 0.2, editor: me.combobox },
                { text: 'Controller名称', dataIndex: 'ControllerName', flex: 0.5},
                { text: '描述', dataIndex: 'Description', flex: 0.3, editor: { xtype: 'textfield' } }
            ],
            viewConfig: {
                markDirty: false
            },
            plugins: [me.rowEditing],
            frame: true,
            border: true,
            header: false,
            loadMask: true,
            layout: 'fit',
            tbar: me.topBar,
            bbar: me.pageBar
        });

        var tab = Ext.getCmp('tabMain').getActiveTab();
        tab.add(me.grid);
        tab.doLayout();
    }
});

Ext.onReady(function() {
    Ext.create('action');
});